{% extends "base.html" %}

{% block title %}图片格式转换工具 - 工具箱{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <h1 class="text-3xl font-bold mb-4">图片格式转换工具</h1>
    <p class="text-gray-600 mb-6">在不同图片格式之间自由转换，支持JPG、PNG、WEBP和GIF等常用格式。</p>
    
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- 上传区域 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold mb-4">上传图片</h2>
            <form method="POST" enctype="multipart/form-data" class="space-y-4">
                <div class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-500 transition-colors" id="dropArea">
                    <input type="file" name="file" id="fileInput" class="hidden" accept="image/jpeg,image/png,image/gif,image/webp">
                    <label for="fileInput" class="cursor-pointer">
                        <div class="text-gray-500">
                            <i class="fas fa-cloud-upload-alt text-4xl mb-3"></i>
                            <p>点击或拖拽图片到此处上传</p>
                            <p class="text-sm mt-2">支持 JPG, PNG, GIF, WEBP 格式</p>
                        </div>
                    </label>
                    <div id="preview" class="mt-4 hidden">
                        <img id="imagePreview" class="max-h-48 mx-auto" src="" alt="预览图">
                        <p id="fileName" class="mt-2 text-sm text-gray-500"></p>
                    </div>
                </div>
                
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">目标格式</label>
                    <div class="grid grid-cols-2 sm:grid-cols-4 gap-2">
                        <label class="flex items-center border rounded-md p-2 cursor-pointer hover:bg-gray-50">
                            <input type="radio" name="format" value="jpeg" class="mr-2" checked>
                            <span>JPG</span>
                        </label>
                        <label class="flex items-center border rounded-md p-2 cursor-pointer hover:bg-gray-50">
                            <input type="radio" name="format" value="png" class="mr-2">
                            <span>PNG</span>
                        </label>
                        <label class="flex items-center border rounded-md p-2 cursor-pointer hover:bg-gray-50">
                            <input type="radio" name="format" value="webp" class="mr-2">
                            <span>WEBP</span>
                        </label>
                        <label class="flex items-center border rounded-md p-2 cursor-pointer hover:bg-gray-50">
                            <input type="radio" name="format" value="gif" class="mr-2">
                            <span>GIF</span>
                        </label>
                    </div>
                </div>
                
                <div>
                    <button type="submit" class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 font-medium">
                        开始转换
                    </button>
                </div>
            </form>
        </div>
        
        <!-- 结果区域 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-xl font-semibold mb-4">转换结果</h2>
            {% if result %}
                <div class="space-y-4">
                    <div class="border rounded-lg p-4">
                        <div class="flex justify-between text-sm text-gray-600 mb-2">
                            <span>原始格式: {{ original_format }}</span>
                            <span>转换格式: {{ target_format }}</span>
                        </div>
                    </div>
                    
                    <div class="border rounded-lg p-4">
                        <img src="data:image/{{ target_format|lower }};base64,{{ result }}" class="max-w-full mx-auto" alt="转换后的图片">
                    </div>
                    
                    <div class="flex space-x-2">
                        <a href="data:image/{{ target_format|lower }};base64,{{ result }}" download="converted_image.{{ target_format|lower }}" class="flex-1 bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700 font-medium text-center">
                            下载图片
                        </a>
                        <button id="copyBtn" class="bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 font-medium">
                            复制图片
                        </button>
                    </div>
                </div>
            {% else %}
                <div class="border rounded-lg p-8 text-center text-gray-500">
                    <i class="fas fa-image text-4xl mb-3"></i>
                    <p>转换后的图片将显示在这里</p>
                    <p class="text-sm mt-2">您可以下载或复制转换后的图片</p>
                </div>
            {% endif %}
        </div>
    </div>
    
    <!-- 格式说明 -->
    <div class="bg-white rounded-lg shadow-md p-6 mt-8">
        <h2 class="text-xl font-semibold mb-4">图片格式说明</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h3 class="font-bold text-lg mb-2">JPG格式</h3>
                <ul class="space-y-2 text-gray-600">
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                        <span>最适合照片和复杂图像</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                        <span>文件大小小，适合网页使用</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-times-circle text-red-500 mt-1 mr-2"></i>
                        <span>不支持透明背景</span>
                    </li>
                </ul>
            </div>
            <div>
                <h3 class="font-bold text-lg mb-2">PNG格式</h3>
                <ul class="space-y-2 text-gray-600">
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                        <span>支持透明背景</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                        <span>适合图标、logo和插图</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-times-circle text-red-500 mt-1 mr-2"></i>
                        <span>文件大小较大</span>
                    </li>
                </ul>
            </div>
            <div>
                <h3 class="font-bold text-lg mb-2">WEBP格式</h3>
                <ul class="space-y-2 text-gray-600">
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                        <span>最佳的网页图片格式</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                        <span>比JPG和PNG文件更小</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                        <span>支持有损和无损压缩</span>
                    </li>
                </ul>
            </div>
            <div>
                <h3 class="font-bold text-lg mb-2">GIF格式</h3>
                <ul class="space-y-2 text-gray-600">
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                        <span>支持简单动画</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                        <span>支持透明背景</span>
                    </li>
                    <li class="flex items-start">
                        <i class="fas fa-times-circle text-red-500 mt-1 mr-2"></i>
                        <span>色彩数量有限</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 图片预览
        const fileInput = document.getElementById('fileInput');
        const preview = document.getElementById('preview');
        const imagePreview = document.getElementById('imagePreview');
        const fileName = document.getElementById('fileName');
        
        fileInput.addEventListener('change', function() {
            if (this.files && this.files[0]) {
                const file = this.files[0];
                
                const reader = new FileReader();
                reader.onload = function(e) {
                    imagePreview.src = e.target.result;
                    fileName.textContent = file.name;
                    preview.classList.remove('hidden');
                }
                reader.readAsDataURL(file);
            }
        });
        
        // 拖放上传
        const dropArea = document.getElementById('dropArea');
        
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, preventDefaults, false);
        });
        
        function preventDefaults(e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        ['dragenter', 'dragover'].forEach(eventName => {
            dropArea.addEventListener(eventName, highlight, false);
        });
        
        ['dragleave', 'drop'].forEach(eventName => {
            dropArea.addEventListener(eventName, unhighlight, false);
        });
        
        function highlight() {
            dropArea.classList.add('border-blue-500');
        }
        
        function unhighlight() {
            dropArea.classList.remove('border-blue-500');
        }
        
        dropArea.addEventListener('drop', handleDrop, false);
        
        function handleDrop(e) {
            const dt = e.dataTransfer;
            const files = dt.files;
            
            if (files && files[0]) {
                fileInput.files = files;
                
                const file = files[0];
                const reader = new FileReader();
                reader.onload = function(e) {
                    imagePreview.src = e.target.result;
                    fileName.textContent = file.name;
                    preview.classList.remove('hidden');
                }
                reader.readAsDataURL(file);
            }
        }
        
        // 复制图片按钮
        const copyBtn = document.getElementById('copyBtn');
        if (copyBtn) {
            copyBtn.addEventListener('click', function() {
                const img = document.querySelector('.result-area img');
                if (img) {
                    // 创建canvas
                    const canvas = document.createElement('canvas');
                    canvas.width = img.naturalWidth;
                    canvas.height = img.naturalHeight;
                    
                    // 绘制图片到canvas
                    const ctx = canvas.getContext('2d');
                    ctx.drawImage(img, 0, 0);
                    
                    // 将canvas转换为blob
                    canvas.toBlob(function(blob) {
                        // 创建ClipboardItem
                        const item = new ClipboardItem({ 'image/png': blob });
                        
                        // 写入剪贴板
                        navigator.clipboard.write([item]).then(function() {
                            alert('图片已复制到剪贴板');
                        }, function(error) {
                            alert('复制失败: ' + error);
                        });
                    });
                }
            });
        }
    });
</script>
{% endblock %} 